<template>
  <div>
    <el-tabs>
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in comArr" :key="item.label">
        <component :is="item.name || 'UseMouse' "></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import UseMouse from '@/views/vueUse库练习/components/UseMouse.vue'
import UseColorMode from '@/views/vueUse库练习/components/UseColorMode.vue'
import UseFullscreen from '@/views/vueUse库练习/components/UseFullscreen.vue'
import UseStorage from '@/views/vueUse库练习/components/UseStorage.vue'
import UseThrottle from '@/views/vueUse库练习/components/UseThrottle.vue'
import UseAsyncState from '@/views/vueUse库练习/components/UseAsyncState.vue'
import UseCloned from '@/views/vueUse库练习/components/UseCloned.vue'
import UseTime from '@/views/vueUse库练习/components/UseTime.vue'
import UseScroll from '@/views/vueUse库练习/components/UseScroll.vue'
import UseFetch from '@/views/vueUse库练习/components/UseFetch.vue'
import UseDraggable from '@/views/vueUse库练习/components/UseDraggable.vue'
import UseVirtualList from '@/views/vueUse库练习/components/UseVirtualList.vue'
import UseBrowser from '@/views/vueUse库练习/components/UseBrowser.vue'
defineOptions({
  name: 'IndexCom',
  components: {
    UseMouse,
    UseColorMode,
    UseFullscreen,
    UseStorage,
    UseThrottle,
    UseAsyncState,
    UseCloned,
    UseTime,
    UseScroll,
    UseFetch,
    UseDraggable,
    UseVirtualList,
    UseBrowser
  },
  data() {
    return {
      name: 'TestPage',
      comArr: [
        {
          label: '鼠标',
          name: 'UseMouse'
        },
        {
          label: '颜色',
          name: 'UseColorMode'
        },
        {
          label: '全屏',
          name: 'UseFullscreen'
        },
        {
          label: '存储',
          name: 'UseStorage'
        },
        {
          label: '节流',
          name: 'UseThrottle'
        },
        {
          label: '异步',
          name: 'UseAsyncState'
        },
        {
          label: '克隆',
          name: 'UseCloned'
        },
        {
          label: '时间',
          name: 'UseTime'
        },
        {
          label: '滚动',
          name: 'UseScroll'
        },
        {
          label: '请求',
          name: 'UseFetch'
        },
        {
          label: '拖拽',
          name: 'UseDraggable'
        },
        {
          label: '虚拟列表',
          name: 'UseVirtualList'
        },
        {
          label: '浏览器信息',
          name: 'UseBrowser'
        }
      ]
    }
  }
})
</script>

<style>

</style>

